<template>
	<view class="warp">
		<up-navbar :title="titleShow?title:''"></up-navbar>
		<scroll-view class="scroll-view" scroll-y="true" @scroll="handleScroll" style="margin-top: 90rpx;">
			<view class="content" style="background-color: #fd7400;height: 300rpx;position: relative;">
				<!-- 这里是你的内容，比如文字 -->
				<text :animation="animationData" class="fadetext">{{title}}</text>
			</view>
			<view class="card">
				<up-card :head-border-bottom="false" :foot-border-top="false" :border="false" border-radius="0" margin="0">
					<template #head>
						<view class="head_box">
							<up-icon name="order" size="25" color="#d98f41" />
							<text>10320240427162420498</text>
						</view>
						<view class="head_box1">
							<up-icon name="home" size="25" color="#d98f41" />
							<text>谯家镇初级中学</text>
						</view>
					</template>

					<template #body>
						<view class="body_box" v-for="(item,index) in 3" style="margin-bottom: 50rpx;">
							<view class="" style="display: flex;align-items: center;">
								<up-image :src="czImg" shape="circle" width="110rpx" height="110rpx" style="padding-right: 20rpx;" />
								<view class="" style="width: 100vw;">
									<view class="" style="display: flex;justify-content: space-between;">
										<text>干粉条</text>
										<text>[2024082709]</text>
									</view>
									<view style="padding: 10rpx 0;">¥6.84/斤 x70.0</view>
									<text>规格：未设置 保质期：60天</text>
								</view>
							</view>
							<view style="float: right;">小计:<text style="color: #ed7c1b;">394.20</text> </view>
						</view>



					</template>

					<template #foot>
						<view class="" style="float: right;display: flex;">
							<view>食材:<text style="color: #ed7c1b;">2</text>种</view>
							<view style="margin-left: 30rpx;">合计:<text style="color: #ed7c1b;">394.20</text> </view>
						</view>
						<view class="" style="margin-top: 70rpx;border: 1rpx solid red;display: flex;flex-direction: column;">
							<view class="" style="padding: 10rpx;">
								<text>采购人：</text>
								<text>{{fromData.name}}</text>
							</view>
							<view class="" style="padding: 10rpx">
								<text>创建时间：</text>
								<text>{{fromData.createdate}}</text>
							</view>
							<view class="" style="padding: 10rpx;">
								<text>收货时间：</text>
								<text>{{fromData.deliverydate}}</text>
							</view>
							<view class="" style="padding: 10rpx;">
								<text>送货地址：</text>
								<text>{{fromData.address}}</text>
							</view>
							<view class="" style="padding: 10rpx;">
								<text>联系电话：</text>
								<text>{{fromData.phone}}</text>
							</view>
						</view>
					</template>
				</up-card>
			</view>
			<view class="footer">
				<view style="float: right;display: flex;align-items: center;">
					<text style="color: #9d9d9d;font-size:28rpx;margin-right: 20rpx">发货前,请先拍照</text>
					<up-button class="button">发货拍照</up-button>
				</view>
			</view>
		</scroll-view>
	</view>


</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from 'vue'
	const title = ref("待发货")
	const marginLeft1 = ref(60)
	const titleShow = ref(false)
	const opacity = ref(1)
	const fontSize = ref(30)
	const color = ref('#fff')
	import czImg from '../../static/image/icon-大-米面.png'


	const position = ref()

	const animationData = ref()
	const fromData = ref({
		name: "张三",
		createdate: '2024-09-09',
		deliverydate: '2024-09-09',
		address: '贵州省沿河县泉坝镇大泉村',
		phone: '15008567877'
	})

	const ttt = (data) => {
		console.log(data);
		let top = 161 - data.top;
		const animation = uni.createAnimation()
		console.log('top', top);
		if (titleShow.value == false && top > 0) {

			animation.translateX(top).opacity(0.5).scale(0.6, 0.6).step()
			animationData.value = animation.export()
			if (top >= 161) {
				titleShow.value = true
			}
		} else {
			animation.translateX(top).opacity(1).scale(1, 1).step()
			animationData.value = animation.export()
			if (top <= 0) {
				animation.translateX(top).opacity(1).scale(1, 1).step()
				titleShow.value = false
			}
		}

	}
	onMounted(() => {

	})

	const handleScroll = (e) => {

		const query = uni.createSelectorQuery().in(this)
		query.select('.fadetext').boundingClientRect(data => {
			// console.log(data);
			ttt(data)
		}).exec()



		// const startTop = uni.createSelectorQuery().select('.fade-text').boundingClientRect((res) => {
		// 	return res.top
		// }).exec()

		// console.log(e);
		// console.log(titleShow.value);
		// if (titleShow.value == false) {
		// 	opacity.value = 1 - Math.min(e.detail.scrollTop / 50, 0.5); // 500是阈值，决定透明度变化的速度
		// 	marginLeft.value += 2.5
		// 	fontSize.value = 70 + 'rpx'
		// 	opacity.value -= 0.1
		// 	if (e.detail.scrollTop >= 150) {
		// 		titleShow.value = true
		// 	}
		// } else {
		// 	marginLeft.value = Math.min(marginLeft.value - 2.5)
		// 	console.log(33333);
		// 	if (e.detail.scrollTop == 0) {
		// 		titleShow.value = false
		// 		opacity.value = 1
		// 	}
		// }
	}
</script>

<style lang="scss" scoped>
	.warp {
		background-color: #fff;

		.scroll-view {
			height: 100vh;

			.fadetext {
				position: absolute;
				bottom: 20rpx;
				margin-left: 60rpx;
				color: aliceblue;
				font-size: 45rpx;

			}

			.card {
				.head_box {
					display: flex;
					align-items: center;
				}

				.head_box1 {
					display: flex;
					align-items: center;
					margin-top: 20rpx;
				}
			}
		}

		.footer {
			width: 100vw;
			// border: 1rpx solid red;
			// background-color: #fff;
			position: fixed;
			bottom: 0;

			::v-deep.button {
				width: 200rpx;
				height: 80rpx;
				color: #fff;
				background-color: #fd7400;
			}
		}


	}
</style>